<template>
  <view class="page-container">
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 状态栏占位符 -->
      <view class="status-bar" />
      <!-- 醒目的标题 -->
      <view class="template-title-container">
        <text class="template-name">Vuex 示例</text>
        <view class="title-underline" />
      </view>

      <!-- 示例内容区域 -->
      <view class="content-section">
        <view class="section">
          <view class="subtitle">用户信息</view>
          <view class="example">
            <view class="example-content">用户名：{{ userInfo.name }}</view>
            <view class="example-content">年龄：{{ userInfo.age }}</view>
            <view class="example-content">Token：{{ token }}</view>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">更新用户信息</view>
          <view class="example">
            <view class="form-item">
              <view class="example-content">用户名：</view>
              <input v-model="formData.name" placeholder="请输入用户名" />
            </view>
            <view class="form-item">
              <view class="example-content">年龄：</view>
              <input v-model="formData.age" type="number" placeholder="请输入年龄" />
            </view>
            <button @click="updateUserInfo">更新用户信息</button>
            <button @click="updateToken">更新 Token</button>
          </view>
        </view>

        <view class="section">
          <view class="subtitle">Vuex 说明</view>
          <view class="example">
            <view class="example-content">1. 使用 mapState 映射状态</view>
            <view class="example-content">2. 使用 dispatch 触发 actions</view>
            <view class="example-content">3. 使用 commit 触发 mutations</view>
            <view class="example-content">4. 数据更新后视图自动更新</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="deco-shape-1" />
      <view class="deco-shape-2" />
    </view>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
      },
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
    ...mapState('token', ['token']),
  },
  methods: {
    ...mapMutations('user', ['SET_USER_INFO']),
    ...mapMutations('token', ['SET_TOKEN']),

    updateUserInfo() {
      if (!this.formData.name || !this.formData.age) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none',
        })
        return
      }

      const updatedUser = {
        name: this.formData.name,
        age: Number(this.formData.age),
      }

      this.SET_USER_INFO(updatedUser)

      uni.showToast({
        title: '更新成功',
        icon: 'success',
      })
    },

    updateToken() {
      const newToken = 'token_' + Date.now()
      this.SET_TOKEN(newToken)
      uni.showToast({
        title: 'Token 更新成功',
        icon: 'success',
      })
    },
  },
}
</script>

<style lang="scss">
.page-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background-color: #000;

  // 青色光晕 (左上角)
  &::before {
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    z-index: 0;
    width: 1000rpx;
    height: 1000rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(120rpx);
  }

  // 品红色光晕 (右下角)
  &::after {
    position: absolute;
    right: -400rpx;
    bottom: -400rpx;
    z-index: 0;
    width: 1200rpx;
    height: 1200rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(140rpx);
  }
}

.main-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 80rpx 40rpx;
}

.template-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;

  .template-name {
    margin-bottom: 20rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
  }

  .title-underline {
    width: 100rpx;
    height: 4rpx;
    background-color: #fff;
    border-radius: 2rpx;
  }
}

.content-section {
  width: 100%;
  max-width: 750rpx;
}

.section {
  margin-bottom: 40rpx;

  .subtitle {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }
}

.example {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  backdrop-filter: blur(10px);

  .example-content {
    margin-bottom: 5rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
  }

  .form-item {
    margin-bottom: 20rpx;

    input {
      width: 100%;
      height: 72rpx;
      padding: 0 20rpx;
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.05);
      border: 2rpx solid rgba(255, 255, 255, 0.1);
      border-radius: 8rpx;

      &::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
    }
  }

  button {
    width: 100%;
    height: 72rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8rpx;
  }
}

.footer-decoration {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 200rpx;

  .deco-shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200rpx;
    height: 200rpx;
    background: linear-gradient(45deg, #00dcff, transparent);
    border-radius: 200rpx;
    opacity: 0.1;
  }

  .deco-shape-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200rpx;
    height: 200rpx;
    background: linear-gradient(45deg, transparent, #ff2a6d);
    border-radius: 200rpx;
    opacity: 0.1;
  }
}
</style>
